<template>
  <view class="verification-operation">
	  <view class="colorbottom"></view>
    <!-- 内容容器 -->
    <view class="content">
      <!-- 核销码区域 -->
      <view class="code-section">
        <text class="code-title">核销码 MC1234-5678-9012</text>
      </view>
      <!-- 服务内容区域 -->
      <view class="service-section">
        <text class="section-title">服务内容</text>
        <text class="service-item">XXX标准洗车服务包含</text>
        <text class="service-item">整车泡沫冲洗擦T</text>
        <text class="service-item">轮胎轮毂冲洗清洁</text>
        <text class="service-item">车内吸尘</text>
        <text class="service-item">内饰脚垫简单除尘</text>
        <text class="service-item">(不包含虫户、水泥、沥青和顽固污渍清理等)</text>
      </view>
      <!-- 订单信息区域 -->
      <view class="order-section">
        <text class="section-title">订单信息</text>
        <text class="order-item">订单价格: ¥30.00</text>
        <text class="order-item" style="color: #f00;">实付金额:¥25.00</text>
        <text class="order-item">优惠金额: ¥5.00</text>
        <text class="order-item">订单编号 2020032554565799</text>
        <text class="order-item">支付时间 2020.03.30 14:40:45</text>
        <text class="order-item">预约时间 2020.03.30 14:40</text>
      </view>
      <!-- 确认核销按钮 -->
       <button 
              class="confirm-btn" 
              @click="showConfirmModal" 
              :disabled="isBtnDisabled"
              :style="isBtnDisabled ? 'background-color: #999;' : 'background-color: #3399ff;'"
            >
              {{ isBtnDisabled ? '已核销' : '确认核销' }}
            </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isBtnDisabled: false // 按钮是否禁用，初始为可点击
    };
  },
  methods: {
    onBack() {
      // 返回上一页逻辑，uniapp 中可使用 uni.navigateBack()
      uni.navigateBack({
        delta: 1
      });
    },
    showConfirmModal() {
          uni.showModal({
            title: '核销此订单',
            content: '请您仔细核对订单，此操作不可撤销，请谨慎操作！',
            success: (res) => {
              if (res.confirm) {
                // 这里可编写真正的核销逻辑，比如调用后端接口
                console.log('用户点击确认，执行核销操作'); 
                // 假设核销成功后，修改按钮状态
                this.isBtnDisabled = true;
                // 核销成功提示 
                uni.showToast({
                  title: '核销成功',
                  icon: 'success',
                  duration: 2000
                });
              } else if (res.cancel) {
                console.log('用户点击取消，不执行核销操作');
              }
            }
          });
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.verification-operation {
  background-color: #fff;
  min-height: 100vh;
  font-size: 14px;
  position: relative;
  z-index: 1;
/*  color: #333; */
}

.colorbottom{
	width: 100%;
	height: 300rpx;
	background-color: #3399ff;
	position: absolute;
	z-index: 2;
}

/* 内容容器样式 */
.content {
  width: 658rpx;
  padding: 15px;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  position: absolute;
  z-index: 3;
}
/* 核销码区域样式 */
.code-section {
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.code-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10rpx;
}
/* 板块标题通用样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 15px;
}
/* 服务内容区域样式 */
.service-section {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.service-item {
  display: block;
  margin-bottom: 10px;
  color: #666;
}
/* 订单信息区域样式 */
.order-section {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.order-item {
  display: block;
  margin-bottom: 5px;
  color: #666;
}
/* 确认核销按钮基础样式，动态样式通过 :style 覆盖 */
.confirm-btn {
  width: 100%;
  color: #fff;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-radius: 20px;
  margin-top: 20px;
}
</style>